import styles from '../css/SearchResult.module.css'
import { DeleteOutline } from 'antd-mobile-icons'
import { Dialog } from 'antd-mobile'

function SearchResult(props) {
  return (
    <div className={styles.box}>
      <div className={styles.title}>
        <span>搜索历史</span>
        <DeleteOutline
          fontSize={20}
          onClick={() =>
            Dialog.confirm({
              content: '您确认删除吗？',
              // 调用父组件传入的清空数组的函数
              onConfirm: () => props.clear()
            })
          }
        />
      </div>
      <ul className={styles.list}>
        {/* 循环渲染搜索历史项 */}
        {props.list.map((item, i) => (
          <li
            key={i}
            onClick={() => props.myfn(item)}
          >
            {item}
          </li>
        ))}
      </ul>
    </div>
  )
}

export default SearchResult
